<template>
  <div class="editor-wrapper">
    <div :id="editorId"></div>
  </div>
</template>

<script>
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
export default {
  name: 'Editor',
  props: {
    value: {
      type: String,
      default: ''
    }
    /**
       * 绑定的值的类型, enum: ['html', 'text']
       */
    // valueType: {
    //   type: String,
    //   default: 'html',
    //   validator: (val) => {
    //     return oneOf(val, ['html', 'text'])
    //   }
    // },
    // /**
    //  * @description 设置change事件触发时间间隔
    //  */
    // changeInterval: {
    //   type: Number,
    //   default: 200
    // },
    // /**
    //  * @description 是否开启本地存储
    //  */
    // cache: {
    //   type: Boolean,
    //   default: true
    // }
  },
  computed: {
    editorId () {
      return `editor${this._uid}`
    }
  },
  methods: {
    setHtml (val) {
      this.editor.txt.html(val)
    }
  },
  mounted () {
    this.editor = new Editor(`#${this.editorId}`)
    // this.editor.customConfig.onchange = (html) => {
    //   let text = this.editor.txt.text()
    //   if (this.cache) localStorage.editorCache = html
    //   this.$emit('input', this.valueType === 'html' ? html : text)
    //   this.$emit('on-change', html, text)
    // }
    this.editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    this.editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法

      // 上传代码返回结果之后，将图片插入到编辑器中
      console.log(files)
    }
    // this.editor.customConfig.onchangeTimeout = this.changeInterval
    // create这个方法一定要在所有配置项之后调用
    this.editor.create()
    // 如果本地有存储加载本地存储内容
    let html = this.value
    // let html = this.value || localStorage.editorCache
    if (html) this.editor.txt.html(html)
  }
}
</script>

<style lang="less" scoped>
  .editor-wrapper *{
    z-index: 100 !important;
  }
  /deep/ .w-e-text-container{
    height: 800px!important;
  }
  /deep/ .w-e-text{
    height: 800px!important;
  }
</style>
